<template>
  <page-body>
    <view class="page">
      <view class="flex flex-wrap align-center justify-between benben-position-layout flex invite_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center invite_fd0_0' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
          <image class='invite_fd0_0_c0' mode="aspectFit" :src='STATIC_URL+"39.png"'></image>
        </view>
        <view class='flex flex-wrap align-center invite_fd0_0'>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout invite_flex_1">
        <view class='flex flex-direction flex-wrap align-center justify-center'>
          <image class='invite_fd1_0_c0' mode="aspectFill" :src='dataMessage.avatar'></image>
          <text class='invite_fd1_0_c1'>{{dataMessage.nickname}}</text>
        </view>
        <view class='flex flex-wrap align-center justify-center invite_fd1_0_c1'>
          <image class='invite_fd1_1_c0' mode="aspectFill" :src='dataMessage.qrcode'></image>
        </view>
        <view class='flex flex-direction flex-wrap align-center justify-between invite_fd1_2'>
          <button class='invite_fd1_2_c0' @tap.stop="popupShow1679975430753=true">一键分享</button>
          <button class='invite_fd1_2_c1' @tap.stop="SavePictureFunc()">保存图片到相册</button>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <benben-popup v-model="popupShow1679975430753" :mask="true" :mask-close-able="true" mode='bottom'>
        <!---分享flex布局开始-->
        <view class="flex benben-flex-layout flex-wrap align-center invite_flex_2">
          <view class='flex flex-direction flex-wrap align-stretch invite_fd2_0'>
            <view class='flex flex-wrap align-center justify-between invite_fd2_0_c0'>
              <view class='flex flex-wrap align-center invite_fd2_0_c0_c0'>
              </view>
              <view class='flex flex-wrap align-center'>
                <image class='invite_fd2_0_c0_c1_c0' mode="aspectFit" :src='STATIC_URL+"180.png"'></image>
                <text class='invite_fd2_0_c0_c1_c1'>{{$t('分享到')}}</text>
                <image class='invite_fd2_0_c0_c1_c0' mode="aspectFit" :src='STATIC_URL+"181.png"'></image>
              </view>
              <image class='invite_fd2_0_c0_c2' mode="aspectFit" :src='STATIC_URL+"182.png"'
                @tap.stop="popupShow1679975430753=false"></image>
            </view>
            <view class='flex flex-wrap align-center justify-center invite_fd2_0_c1'>
              <view class='flex flex-wrap align-center justify-between invite_fd2_0_c1_c0'>
                <view class='flex flex-direction flex-wrap align-center' @tap="MysharedFunc(1)">
                  <image class='invite_fd2_0_c1_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"183.png"'></image>
                  <text class='invite_fd2_0_c1_c0_c0_c1'>{{$t('微信好友')}}</text>
                </view>
                <view class='flex flex-direction flex-wrap align-center' @tap="MysharedFunc(2)">
                  <image class='invite_fd2_0_c1_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"184.png"'></image>
                  <text class='invite_fd2_0_c1_c0_c0_c1'>{{$t('朋友圈')}}</text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!---分享flex布局结束-->

      </benben-popup>


    </view>
  </page-body>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js'

  export default {
    components: {},


    data() {
      return {
        "popupShow1679975430753": false,
        "dataMessage": {
          "invite_code": "",
          "address": "",
          "address_code": "",
          "hobby": "",
          "tags": "",
          "id": "",
          "userlevel_id": "",
          "mobile": "",
          "real_name": "",
          "avatar": "",
          "account": "",
          "email": "",
          "birthday": "",
          "gender": "",
          "create_time": "",
          "user_money": "",
          "freeze_money": "",
          "total_consumption_money": "",
          "score": "",
          "_mobile": "",
          "coupon": "",
          "collection_count": "",
          "browse_count": "",
          "total_money": "",
          "certified": "",
          "nickname": "",
          "is_pay_password": "",
          "follow_count": ""
        },
        "dataDetails": {
          "qrcode_url": "",
          "url": ""
        }
      };
    },
    computed: {
      /**
       * @returns
       * Android       安卓
       * IOS       苹果
       * Web       H5 或 pc
       * Wechat       微信小程序
       * Alipay       支付宝小程序
       * Baidu       百度小程序
       * ByteBounce       抖音小程序
       * 360       360小程序
       * FastApp       快应用
       */
      appSystemIdentification() {
        return this.$store.state.appSystemIdentification
      }
    },
    watch: {},
    onLoad(options) {
      this.getUserinfoFunc()
      // this.gethaibaoFunc()
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {

    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      //保存图片
      SavePictureFunc() {
        if (this.appSystemIdentification == 'IOS' || this.appSystemIdentification == 'Android') {
          uni.saveImageToPhotosAlbum({
            filePath: this.dataMessage.qrcode,
            success: (res) => {
              console.log(res)
              this.$message.info(global.i18n.t('保存成功'))
              this.close()
            },
          })
        } else if (this.appSystemIdentification == 'Web') {
          uni.downloadFile({
            url: this.dataMessage.qrcode,
            success: (res) => {
              console.log(res)
              if (res.statusCode === 200) {
                console.log('下载成功');
                var oA = document.createElement("a");
                oA.download = ''; // 设置下载的文件名，默认是'下载'
                oA.href = res.tempFilePath; //临时路径再保存到本地
                document.body.appendChild(oA);
                oA.click();
                oA.remove(); // 下载之后把创建的元素删除
              }

            }
          });
        } else if (this.appSystemIdentification == 'Wechat') {
          uni.getImageInfo({
            src: this.dataMessage.qrcode,
            success: (res) => {
              uni.saveImageToPhotosAlbum({
                filePath: res.path,
                success: (ress) => {
                  this.$message.info(this.$t('保存成功'))
                },
                fail: (err) => {
                  console.log(err);
                  this.$message.info(this.$t('保存失败'))
                }
              })
            }
          })
        }
      },
      //获取会员详细信息
      async getUserinfoFunc() {
        //请求方法
        //数据验证

        let datadataMessage = await this.$api.get(global.apiUrls.post5c78c4772da97, {

        });

        if (datadataMessage.data.code != 1) {
          this.$message.info(datadataMessage.data.msg);
          return
        }
        let infodataMessage = datadataMessage.data;
        this.dataMessage = infodataMessage.data

      },
      //分销中心-邀请好友推广海报
      async gethaibaoFunc() {
        //请求方法
        //数据验证

        let datadataDetails = await this.$api.get(global.apiUrls.post641ee42b715ef, {

        });

        if (datadataDetails.data.code != 1) {
          this.$message.info(datadataDetails.data.msg);
          return
        }
        let infodataDetails = datadataDetails.data;
        this.dataDetails = infodataDetails.data

      },
      //分享
      async MysharedFunc(type) {
        if (type == '1') {
          await this.syncUniApi('share', {
            'provider': 'weixin',
            'scene': 'WXSceneSession',
            'type': '0',
            'title': '推荐一个好物给您',
            'title': this.dataMessage.shareTitle,
            'href': this.dataMessage.shareUrl,
            'imageUrl': this.dataDetails.qrcode
          })
        } else if (type == '2') {
          await this.syncUniApi('share', {
            'provider': 'weixin',
            'scene': 'WXSceneTimeline',
            'type': '0',
            'title': this.dataMessage.shareTitle,
            'href': this.dataMessage.shareUrl,
            'imageUrl': this.dataDetails.qrcode
          })
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: url(image-path('152.png')) no-repeat;
    background-size: 100% 100%;
  }

  .invite_flex_0 {
    background: url(image-path('152.png')) no-repeat;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .invite_fd0_0_c0 {
    width: 20rpx;
    height: 36rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 0rpx 0rpx 32rpx;
  }

  .invite_fd0_0 {
    width: 100rpx;
    height: 88rpx;
  }

  .invite_flex_1 {
    background: var(--benbenbgColor1);
    background-size: 100% auto;
    width: 672rpx;
    border-radius: 16rpx;
    padding: 56rpx 32rpx 40rpx 32rpx;
    margin: 300rpx auto 0rpx auto;
  }

  .invite_fd1_2_c1 {
    border: 2px solid #5ECA71;
    background: #FFFFFF;
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    font-size: 32rpx;
    color: var(--benbenFontColor7);
    width: 480rpx;
    height: 88rpx;
    line-height: 88rpx;
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .invite_fd1_2_c0 {
    background: var(--benbenbgColor2);
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    font-size: 32rpx;
    color: var(--benbenFontColor3);
    width: 480rpx;
    height: 88rpx;
    line-height: 88rpx;
  }

  .invite_fd1_2 {
    margin: 48rpx 0rpx 0rpx 0rpx;
  }

  .invite_fd1_1_c0 {
    width: 320rpx;
    height: 320rpx;
  }

  .invite_fd1_0_c1 {
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .invite_fd1_0_c0 {
    width: 96rpx;
    height: 96rpx;
    border-radius: 16rpx;
  }

  .invite_flex_2 {
    position: relative;
    z-index: 9999;
  }

  .invite_fd2_0_c1_c0_c0_c1 {
    color: #333;
    font-size: 24rpx;
    font-weight: 400;
    margin: 16rpx 0rpx 0rpx 0rpx;
  }

  .invite_fd2_0_c1_c0_c0_c0 {
    width: 80rpx;
    height: 80rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .invite_fd2_0_c1_c0 {
    width: 340rpx;
  }

  .invite_fd2_0_c1 {
    margin: 48rpx 0rpx 58rpx 0rpx;
  }

  .invite_fd2_0_c0_c2 {
    width: 40rpx;
    height: 40rpx;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
  }

  .invite_fd2_0_c0_c1_c1 {
    color: #333;
    font-size: 32rpx;
    font-weight: 700;
    margin: 0rpx 24rpx 0rpx 24rpx;
  }

  .invite_fd2_0_c0_c1_c0 {
    width: 32rpx;
    height: 10rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .invite_fd2_0_c0_c0 {
    height: 40rpx;
    width: 40rpx;
  }

  .invite_fd2_0_c0 {
    margin: 40rpx 40rpx 0rpx 40rpx;
  }

  .invite_fd2_0 {
    background: rgba(255, 255, 255, 1);
    background-size: 100% auto !important;
    width: 750rpx;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
  }
</style>
